<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>科创研究成果平台</title>
		<link href="css/main.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js"></script>
		<script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>
		<script src="js/common.js" type="text/javascript"></script>
	    <link rel="stylesheet" href="bootstrapvalidator/css/bootstrapValidator.css"/>
	    <script type="text/javascript" src="bootstrapvalidator/js/bootstrapValidator.js"></script>
	    <script type="text/javascript" src="bootstrapvalidator/js/language/zh_CN.js"></script>
		<style type="text/css">
		.holy-grail {
		    margin: 0 auto;
		    max-width: 1240px;
		    width: 100%;
		    margin-top: 100px;
		}
		.card2 .card-header {
		    display: -ms-flexbox;
		    display: flex;
		    -ms-flex-align: center;
		    align-items: center;
		    margin: 0;
		    padding-left: 26px;
		    height: 60px;
		    font-size: 20px;
		    font-weight: 700;
		    background-color: #f4f8fd;
		    border-bottom: 1px solid #e9eef2;
		    color: #6e7a81;
		}
		.account-layout-body {
		    display: -ms-flexbox;
		    display: flex;
		}
		.account-navbar-container {
		    width: 180px;
		    min-width: 180px;
		}
		.list {
		    width: 130px;
		}
		.list-header {
		    font-size: 22px;
		    color: #1183f2;
		}
		.list-item {
		    padding-top: 8px;
		    padding-bottom: 8px;
		    font-size: 16px;
		    margin: 5px;
		    border-bottom: 1px solid #eee;
		}
		.list-item a {
		    padding-top: 8px;
		    padding-bottom: 8px;
		    color: #333;
		}
		.account-child-layout {
		    -ms-flex-positive: 1;
		    flex-grow: 1;
		    overflow: hidden;
		    margin-bottom: 50px;
		}
		h1{
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
        }
        h2{
            font-weight: bold;
            font-size: 18px;
        }
		</style>
	</head>

	<body style="background-color: #EBEBEB">
		<!--头部-->
		<header>
            <div class="beijing">
                <h2><a href="index.html" style="text-decoration : none"><em style="width:120px;"><font color="#CC0000">富宏堂中医馆</font></em></a></h2>
                <ul class="ulhead">
                    <li>
                        <a class="menu_1 "  href="index.html" >首页</a>
                    </li>
                    <li>
                        <a class="menu_1 " href="hospital.html">分馆介绍<em></em></a>
                    </li>
                    <li>
                        <a class="menu_1 " href="act.html">预约挂号<em></em></a>
                    </li>
                    <li>
                        <a class="menu_1 " href="cooper.html" >人才招聘<em></em></a>
                    </li>
                    <li>
                        <a class="menu_1 hover" href="person.html" >个人中心<em></em></a>
                    </li>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                </ul>
                <div class="clear"></div>       
            </div>
            <div class="clear"></div>
        </header>

		<div class="holy-grail">
			<div class="personal-index-container">
				<div class="account-layout-body">
					<div class="account-navbar-container">
						<ul class="list">
							<li class="list-item">
                                <a href="person.html" >
                                                                                                订单列表
                                </a>
                            </li>
                            
                            <li class="list-item">
                                <a href="person_userinfo.html" class="" style="color: #1183f2;">
                                                                                             个人设置
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:gotoLogout()" class="">
                                                                                             退出账号
                                </a>
                            </li>
						</ul>
					</div>
					<div class="technologies-index-container account-create-technologies-container account-child-layout">
						<div class="technology-body">
							<div class="card2 technology-list">
								<h3 class="card-header title">
									设置
								</h3>
								<div class="card-body" style="margin-top: 20px;">
									<form id="reqform">
		                                  <div class="form-group">
										    <label>用户名</label>
										    <input type="text" name="username" class="form-control" id="username" disabled="disabled">
										  </div>
										  <div class="form-group">
										    <label>密码</label>
										    <input type="password" name="password" class="form-control" id="password" >
										  </div>
										  <div class="form-group">
										    <label>电话号码</label>
										    <input type="number" class="form-control" id="telphone" name="telphone">
										  </div>
										  <div class="form-group">
                                            <label>年龄</label>
                                            <input type="text" class="form-control" id="age" name="age">
                                          </div>
                                          <div class="form-group">
                                            <label>身份证</label>
                                            <input type="text" class="form-control" id="idcard" name="idcard">
                                          </div>
                                          <div class="form-group">
                                            <label>性别</label>
                                            <select id="sex" name="sex" class="form-control">
                                                <option value="男">男</option>
                                                <option value="女">女</option>
                                            </select>
                                          </div>
										  <button type="button" id="btn-submit" class="btn btn-primary">提交</button>
		                            </form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
            
	</body>

</html>
<script type="text/javascript">
	$(document).ready(function() {
		var userid=getCookie("userid");
        if(userid==''||userid==null){
            //跳转到登录、注册页面
            window.location.href="login.html";
        }
	})
	
	
	
	$(function () {
        //显示个人信息
        $.get("/user/info/"+getCookie("userid"),function(res){
        	$("#username").val(res.data.username);
        	$("#password").val(res.data.password);
        	$("#telphone").val(res.data.telphone);
        	$("#age").val(res.data.age);
        	$("#idcard").val(res.data.idcard);
        	$("#sex").val(res.data.sex);
        })
    });
	
    $(function () {
        $("#reqform").bootstrapValidator({
            live: 'enabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
            submitButtons: '#btn-submit',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
            message: 'not null',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
            	password: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '必须输入'
                        }
                    }
                },
                telphone: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '必须输入'
                        }
                    }
                },
                age:{
	                validators: {
	                    notEmpty: {//检测非空,radio也可用
	                        message: '必须输入'
	                    }
	                }
	            },
	            idcard:{
	            	 validators: {
	                        notEmpty: {//检测非空,radio也可用
	                            message: '必须输入'
	                        }
	                    }
	            }
            }
        });
        $("#btn-submit").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
            $("#reqform").bootstrapValidator('validate');//提交验证
            if ($("#reqform").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                //验证成功后的操作
                //var data=JSON.stringify($('#reqform').serialize());
                var data={"id":getCookie("userid"),"password":$("#password").val(),
                		"telphone":$("#telphone").val(),"age":$("#age").val(),"idcard":$("#idcard").val(),
                		"sex":$("#sex").val()
                		};
                $.ajax({
                    type: "POST",
                    url: "/user/update",
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType:"application/json",
                    success: function(data){
                       alert("修改成功");
                       location.reload();
                    }
               });
            }
        });
    });

    /*退出账号*/
    function gotoLogout(){
        delCookie("userid");
        window.location.href='login.html';
    }
</script>
